<template>
	<div class="">
		<tableIndex
			:tableHead="tableHead"
			:tableData="tableData"
			:isIndex="true"
			:isSelection="false"
			:isRadio="false"
			:fields="fields"
			:height="500"
			:page="page"
			@searchList="searchList"
			@page-change="pageChange"
		>
			<template #right-btn>
				<div style="float: right">
					<el-button size="small" plain class="button_edit" @click="addHandler">
						<svg-icon icon-class="add-icon-1" />新增业务单元
					</el-button>
				</div>
			</template>
			<!-- <template #operate>
				<el-table-column label="操作" align="center">
					<template #default="{ row }">
						<el-button
							size="small"
							class="update"
							@click="deleteHandler(row)"
							type="primary"
						>
							编辑
						</el-button>
					</template>
				</el-table-column>
			</template> -->
		</tableIndex>
		<publicDialog
			title="新增业务单元"
			:width="'30%'"
			:confirmButtonTitle="'保存'"
			:dialogCenter="true"
			v-model:visible="dialogVisible"
			@onConfirm="confirmHandler"
		>
			<div class="public-dialog-content">
				<el-form
					:model="formData"
					:rules="formRules"
					ref="formRef"
					@submit.native.prevent
				>
					<el-form-item label="业务单元名称" prop="businessUnitName">
						<el-input
							v-model="formData.businessUnitName"
							placeholder="请输入业务单元名称"
							clearable
						/>
					</el-form-item>
					<el-form-item label="业务单元编码" prop="businessUnitId">
						<el-input
							v-model="formData.businessUnitId"
							placeholder="请输入业务单元编码"
							clearable
						/>
					</el-form-item>
				</el-form>
			</div>
		</publicDialog>
	</div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import TableIndex from "@/components/table/index.vue";
import PublicDialog from "@/components/PublicDialog.vue";
import { businessUnitApi } from "@/api/businessFinance.js";
import { ElNotification,ElForm,ElFormItem } from "element-plus";

const fields = ref([
	{
		key: "keywords",
		label: "业务单元",
		type: "input",
		placeholder: "请输入业务单元",
		width: 300,
	},
]);
const page = reactive({
	page: 1,
	pageSize: 50,
	total: 0,
});
let tableHead = ref([
	{
		prop: "businessUnitName",
		label: "业务单元名称",
		minWidth: "120",
	},
	{
		prop: "businessUnitId",
		label: "业务单元编码",
		minWidth: "120",
	},
]);
let tableData = ref([]);
let dialogVisible = ref(false);
let formData = reactive({
	businessUnitName: "",
	businessUnitId: "",
});
let formRules = reactive({
	businessUnitName: [
		{ required: true, message: "请输入业务单元名称", trigger: "blur" },
	],
	businessUnitId: [
		{ required: true, message: "请输入业务单元编码", trigger: "blur" },
	],
});
let formRef = ref(null);
let searchObj = ref({});

let searchList = (content) => {
	searchObj.value = content;
	getList();
};
let pageChange = (content) => {
	// console.log(content);
	page.page = content.page;
  page.pageSize = content.limit;
  getList();
};
let addHandler = () => {
	dialogVisible.value = true;
};
// 保存新增
let confirmHandler = () => {
	formRef.value.validate(async (valid, fields) => {
		if (valid) {
			let { code } = await businessUnitApi.addUnit(formData);
			if (code === '200') {
				ElNotification({
					title: "新增成功",
					type: "success",
				});
				dialogVisible.value = false;
				getList();
			}
		}
	});
};

let getList = async () => {
	let params = {
		pageNum: page.page,
		pageSize: page.pageSize,
		param: searchObj.value.keywords ?? "",
	};
	let { totalSize, content } = await businessUnitApi.getPageList(params);
	page.total = totalSize ?? 0;
	tableData.value = content;
};

onMounted(() => {
  let mainBox = document.querySelector('.main.main-padding');
  console.log(mainBox.clientHeight)
	getList();
});

watch(dialogVisible, (val) => {
	if (!val) {
		formRef.value.resetFields();
	}
});
</script>
<style lang="scss" scoped>
.public-dialog-content {
	.el-form {
		display: block;
	}
}
</style>
